﻿@{
    ViewBag.Title = "MapFuncTest";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    .mapDiv {
        width: 300px; 
        height: 300px; 
        background-color: #ffffff;
        border: 1px solid #00BB00;
        float: left;
        margin: 20px;
        position: relative;
    }
    .mapGroup 
    {
        width: 98%;
    }
</style>

@Html.Partial("~/Views/Shared/_PageNote.cshtml")

<div id="map" class="mapDiv"></div>

<br />

<select id="selCity">
    <option value="SH">Shanghai</option>
    <option value="TK">Tokyo</option>
    <option value="NY">Newyork</option>
</select>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    window.onload = function () {
        var options = {
            zoom: 10,
            center: new google.maps.LatLng(31.285593, 121.473083),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var mapDiv = document.getElementById('map');

        // Creating the map
        var map = new google.maps.Map(mapDiv, options);

        $('#selCity').change(function () {
            changeCityMap($(this).val());
        });
    }

    function changeCityMap(cityCode) {
        switch (cityCode) {
            case "SH":
                ZEUS.DEBUG.log("You selected: Shanghai");
                map.setCenter(new google.maps.LatLng(31.285593, 121.473083));
                break;
            case "TK":
                ZEUS.DEBUG.log("You selected: Tokyo");
                map.setCenter(new google.maps.LatLng(31.285593, 121.473083));
                break;
            case "NY":
                ZEUS.DEBUG.log("You selected: Newyork");
                map.setCenter(new google.maps.LatLng(31.285593, 121.473083));
                break;
            default:
                ZEUS.DEBUG.log("Wrong Selection!");

        }
    }
</script>
